<template>
  <div>
    <a-row v-if="isAdmin">
      <a-col :span="6">
        <a-form-item
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          label="医生名称"
          name="employeeId"
        >
          <a-select
            v-model:value="queryData.employeeId"
            show-search
            placeholder="请输入医生名称"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            :options="userData"
            @search="handleSearchUser"
            @change="handlChange"
          ></a-select>
        </a-form-item>
      </a-col>
      <a-button @click="reset" style="margin-left: 20px">重置</a-button>
      <a-col :span="6"> </a-col>
      <a-col :span="6"> </a-col>

      <a-col :span="6"> </a-col>
    </a-row>

    <a-row v-show="isShowInfo">
      <a-col :span="4">
        <a-card class="doctor_box" hoverable style="width: 100%">
          <template #cover>
            <a-descriptions title="医生信息">
              <a-descriptions-item :span="3" label="医生名称">{{
                currentDoctor.name
              }}</a-descriptions-item>
              <a-descriptions-item :span="3" label="所属社区">{{
                currentDoctor?.communityName
              }}</a-descriptions-item>
              <a-descriptions-item :span="3" label="联系电话">{{
                currentDoctor.phone
              }}</a-descriptions-item>
            </a-descriptions>
          </template>
          <a-card-meta title="医生头像">
            <template #description>
              <div class="avatar">
                <a-image
                  style="border-radius: 8px"
                  :width="140"
                  :src="currentDoctor.avatar"
                />
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>

      <a-col :span="20">
        <div class="doctor_table">
          <a-table
            tableLayout="fixed"
            :pagination="false"
            :dataSource="dataSource.data"
            :columns="workColumns"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'monday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.monday.morning = 0"
                    v-show="record.monday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.monday.morning = 1"
                    v-show="record.monday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.monday.afternoon = 0"
                    v-show="record.monday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.monday.afternoon = 1"
                    v-show="record.monday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周二 -->
              <template v-if="column.key === 'tuesday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.tuesday.morning = 0"
                    v-show="record.tuesday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.tuesday.morning = 1"
                    v-show="record.tuesday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.tuesday.afternoon = 0"
                    v-show="record.tuesday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.tuesday.afternoon = 1"
                    v-show="record.tuesday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周三 -->
              <template v-if="column.key === 'wednesday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.wednesday.morning = 0"
                    v-show="record.wednesday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.wednesday.morning = 1"
                    v-show="record.wednesday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.wednesday.afternoon = 0"
                    v-show="record.wednesday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.wednesday.afternoon = 1"
                    v-show="record.wednesday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周四 -->
              <template v-if="column.key === 'thursday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.thursday.morning = 0"
                    v-show="record.thursday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.thursday.morning = 1"
                    v-show="record.thursday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.thursday.afternoon = 0"
                    v-show="record.thursday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.thursday.afternoon = 1"
                    v-show="record.thursday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周五 -->
              <template v-if="column.key === 'friday'">
                <div class="work">
                  <p>上午</p>
                  <a-button
                    @click="record.friday.morning = 0"
                    v-show="record.friday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.friday.morning = 1"
                    v-show="record.friday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.friday.afternoon = 0"
                    v-show="record.friday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.friday.afternoon = 1"
                    v-show="record.friday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周六 -->
              <template v-if="column.key === 'saturday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.saturday.morning = 0"
                    v-show="record.saturday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.saturday.morning = 1"
                    v-show="record.saturday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.saturday.afternoon = 0"
                    v-show="record.saturday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.saturday.afternoon = 1"
                    v-show="record.saturday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
              <!-- 周日 -->
              <template v-if="column.key === 'sunday'">
                <div class="work">
                  <p>上午</p>

                  <a-button
                    @click="record.sunday.morning = 0"
                    v-show="record.sunday.morning == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.sunday.morning = 1"
                    v-show="record.sunday.morning == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                  <p>下午</p>
                  <a-button
                    @click="record.sunday.afternoon = 0"
                    v-show="record.sunday.afternoon == 1"
                    type="primary"
                    >值班</a-button
                  >
                  <a-button
                    @click="record.sunday.afternoon = 1"
                    v-show="record.sunday.afternoon == 0"
                    danger
                    type="primary"
                    >休息</a-button
                  >
                </div>
              </template>
            </template>
          </a-table>

          <!-- 提交按钮 -->
          <div class="submit_btn">
            <a-button
              @click="submit"
              style="margin-right: 20px; background-color: #b83b5e"
              type="primary"
              >提交</a-button
            >
            <a-button @click="resetSchedule" style="margin-right: 20px"
              >重置排班</a-button
            >
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { workColumns } from './columns'
import {
  apiQueryList,
  apiAddScheduling,
  apiGetInfo,
  apiDeleteScheduling,
} from '@/api/User/api'
import { apiGetDetails } from '@/api/Community/api'
import { message } from 'ant-design-vue'

const userData: any = ref([])
const queryData = reactive({
  employeeId: null,
})
const isAdmin = ref(true)
const dataSource = reactive<any>({
  data: [
    {
      schedulingId: null,
      doctorId: null,
      communityId: null,
      monday: {},
      tuesday: {},
      wednesday: {},
      thursday: {},
      friday: {},
      saturday: {},
      sunday: {},
    },
  ],
})
const isShowInfo = ref<boolean>(false)
let timeout2: any = ref(null)
const currentValue: any = ref()
const currentDoctor = ref<any>({})

//重置排班
const resetSchedule = async () => {
  try {
    await apiDeleteScheduling(dataSource.data[0].schedulingId)
    message.success('重置成功')
  } catch (error: any) {
    return message.error(error)
  }
  dataSource.data[0].monday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].tuesday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].wednesday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].thursday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].friday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].saturday = {
    morning: 0,
    afternoon: 0,
  }
  dataSource.data[0].sunday = {
    morning: 0,
    afternoon: 0,
  }

  // submit()
}

//搜索用户
const handlChange = async (_: any, option: any) => {
  try {
    currentDoctor.value = option
    //获取医生的社区名称
    let res = await apiGetDetails(option.communityId)
    currentDoctor.value.communityName = res.data.communityName
    isShowInfo.value = true
    dataSource.data[0].doctorId = currentDoctor.value.empId
    dataSource.data[0].communityId = currentDoctor.value.communityId
    //获取医生排班信息
    getInfo(currentDoctor.value.empId)
  } catch (error) {
    message.error('获取信息失败')
  }
}
//重置
const reset = () => {
  isShowInfo.value = false
  currentDoctor.value = {}
  currentValue.value = null
  queryData.employeeId = null
}

// 提交排班数据
const submit = async () => {
  let copyData = JSON.parse(JSON.stringify(dataSource.data))

  //对数据进行循环 将对象转换成字符串
  copyData.forEach((ele: any) => {
    ele.monday = JSON.stringify(ele.monday)
    ele.tuesday = JSON.stringify(ele.tuesday)
    ele.wednesday = JSON.stringify(ele.wednesday)
    ele.thursday = JSON.stringify(ele.thursday)
    ele.friday = JSON.stringify(ele.friday)
    ele.saturday = JSON.stringify(ele.saturday)
    ele.sunday = JSON.stringify(ele.sunday)
  })

  try {
    await apiAddScheduling(copyData[0])
    message.success('提交成功')
  } catch (error: any) {
    message.error(error)
  }
}

const handleSearchUser = (value: any) => {
  if (timeout2.value) {
    clearTimeout(timeout2.value)
    timeout2.value = null
  }
  timeout2.value = setTimeout(async () => {
    currentValue.value = value
    //搜索医生
    let res = await apiQueryList({
      name: value,
      type: 3,
    })

    userData.value = res.data.map((ele: any) => {
      return {
        label: ele.name,
        value: ele.empId,
        ...ele,
      }
    })
  }, 300)
}

//获取医生的排班信息
const getInfo = async (empId: number) => {
  let info = await apiGetInfo(empId)
  info.data.monday = JSON.parse(info.data.monday)
  info.data.tuesday = JSON.parse(info.data.tuesday)
  info.data.wednesday = JSON.parse(info.data.wednesday)
  info.data.thursday = JSON.parse(info.data.thursday)
  info.data.friday = JSON.parse(info.data.friday)
  info.data.saturday = JSON.parse(info.data.saturday)
  info.data.sunday = JSON.parse(info.data.sunday)
  dataSource.data[0] = info.data
}

onMounted(async () => {
  try {
    //判断如果登录进来的是医生不是管理员则不需要选择框
    let userInfo: any = JSON.parse(localStorage.getItem('employeeInfo') || '')

    if (userInfo.type == 3) {
      isAdmin.value = false
      isShowInfo.value = true
      currentDoctor.value = userInfo
      getInfo(userInfo.empId)
      //获取社区详情
      let res = await apiGetDetails(userInfo.communityId)
      currentDoctor.value.communityName = res.data.communityName
      dataSource.data[0].doctorId = currentDoctor.value.empId
      dataSource.data[0].communityId = currentDoctor.value.communityId
    }
  } catch (error) {
    message.error('获取信息失败!')
  }
})
</script>

<style lang="less" scoped>
.doctor_box {
  box-sizing: border-box;
  padding: 10px 6px;
}
.doctor_table {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
.work {
  width: 100%;
  height: 200px;
  p {
    padding: 4px 0;
    margin: 0;
    // font-size: 22px;
  }
  p:nth-child(3) {
    margin-top: 20px !important;
  }
  button {
    // font-size: 18px;
  }
}
.avatar {
  width: 100%;
  img {
    width: 140px;
    height: 140px;
  }
}

.submit_btn {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
